<template>
    <div class="breadcrumbs">
        <div class="w bread-w">
            <div class="container">
                <a href="">首页</a>
                <span class="bread-span">></span>
                <a href="">全部结果</a>
            </div>
        </div>
    </div>
    <div class="search-filter">
        <div class="w w-p">
            <ul class="filter-list">
                <span class="label">分类：</span>
                <li v-for="(message, i) in messages" :key="i">
                    <a href="">{{ message.item }}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="search-result">
        <div class="w resuit-w">
            <div class="reuslt-order">
                <div class="order-list-box">
                    <ul class="order-list">
                        <li class="order-items order-b"><a href="">综合</a></li>
                        <li class="order-items order-b"><a href="">新品</a></li>
                        <li class="order-items order-b"><a href="">销量</a></li>
                        <li class="order-items"><a href="">价格</a></li>
                    </ul>
                    <ul class="type-list">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="促销" />
                            <el-checkbox label="分期" />
                            <el-checkbox label="仅看有货" />
                        </el-checkbox-group>
                    </ul>
                </div>
                <div class="goods-list-box">
                    展示商品
                </div>
            </div>
        </div>
    </div>
    <!-- <Resuit/> -->
</template>
<script>
import { ref } from 'vue'
// import Resuit from './components/resuit'
export default {
  data () {
    return {
      messages: [
        { id: '1', item: '全部' },
        { id: '2', item: '入耳式耳机' },
        { id: '3', item: '头戴式耳机' },
        { id: '4', item: '手机其他配件' },
        { id: '5', item: '有品商品' },
        { id: '6', item: '耳机配件' }
      ]
    }
  },
  components: {
    // Resuit
  }
}
</script>
<script setup>
const checkList = ref(['selected and disabled', 'Option A'])
</script>
<style scoped>
.search-result {
    height: 1000px;
    background-color: #f5f5f5;
}

.search-result .resuit-w .reuslt-order {
    padding-top: 20px;
}

.search-result .resuit-w .reuslt-order .order-list-box {
    height: 30px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
}

.search-result .resuit-w .reuslt-order .order-list-box .order-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 30px;
}

.search-result .resuit-w .reuslt-order .order-list-box .order-list .order-items {
    height: 20px;
    width: 88px;
    font-size: 14px;
    text-align: center;
}

.search-result .resuit-w .reuslt-order .order-list-box .order-list .order-items a {
    color: #000;
}

.search-result .resuit-w .reuslt-order .order-list-box .order-list .order-items a:hover {
    color: #ff6700;
}

.search-result .resuit-w .reuslt-order .order-list-box .order-list .order-b {
    border-right: 1px solid #c0c0c0;
}

.search-filter {
    height: 84px;
}

.search-filter .w-p {
    padding: 18px 0;
}

.search-filter .w-p .filter-list {
    height: 48px;
    display: flex;
    flex-wrap: wrap;
}

.search-filter .w-p .filter-list .label {
    color: #b0b0b0;
    font-size: 14px;
    width: 124px;
    line-height: 48px;
}

.search-filter .w-p .filter-list li {
    width: 148px;
    font-size: 14px;
    line-height: 48px;
}

.search-filter .w-p .filter-list li a {
    color: #424242;
}

.search-filter .w-p .filter-list li a:hover {
    color: #ff6700;
}

.breadcrumbs {
    height: 40px;
    background-color: #f5f5f5;
}

.breadcrumbs .bread-w .container a {
    color: #777;
    line-height: 40px;
    font-size: 12px;
}

.breadcrumbs .bread-w .container a:hover {
    color: #ff6700;
}

.breadcrumbs .bread-w .container .bread-span {
    color: #777;
    font-size: 12px;
    line-height: 40px;
    margin: 0 5px;
}
</style>
